<template>
	<view class="u-p-l-30 u-p-r-30 u-p-b-30">
		<view class="u-flex u-flex-between u-flex-items-center u-p-t-30 u-p-b-30 u-border-bottom"
			v-for="(item, index) in state.list" :key="index">
			<view class="">
				<p class="u-font-30" :class="item.direction === 1 ? 'u-error-dark' : 'u-success'">
					{{ item.category_name }}
				</p>
				<p class="u-font-26 u-m-t-10 u-light-color">{{ item.created }}</p>
			</view>
			<view class="u-font-38" :class="item.direction === 1 ? 'u-error-dark' : 'u-success'">
				{{ item.direction === 1 ? '+' : '-' }}{{ item.variation }}
			</view>
		</view>

		<view class="u-text-center u-p-t-20 u-p-b-20">
			<view v-if="state.loading === 'loading'">
				<up-loading-icon mode="circle"></up-loading-icon>
				<text class="u-m-l-10">加载中...</text>
			</view>

			<view v-else-if="state.loading === 'loadmore'" @click="loadMore">
				<p class="u-text-center u-p-30 u-font-26">点击加载更多</p>
			</view>
			
			<view class="u-info u-font-26" v-else-if="state.loading === 'nomore'">
				没有更多数据了
			</view>
		</view>
	</view>
</template>

<script setup>
import {
    onLoad,
    onReachBottom
} from '@dcloudio/uni-app'
import {
    reactive,
} from 'vue';
import {
    REQUEST_SUCCESS
} from '/utils/config.js';
import {
    useAuth
} from '/composables/useAuth';
import {
    useStore
} from 'vuex';
import createApi from '/api/commonAPI.js';
const store = useStore();
const commonAPI = createApi(store);

// 计算属性，用于获取 Vuex 中的状态
const {
    token,
    userInfo,
} = useAuth();

const state = reactive({
    list: [],
    page: 1,
    pageSize: 10,
    loading: 'loadmore', // 加载状态，可选值：'loadmore', 'loading', 'nomore'
});

// 使用 onLoad 生命周期事件
onLoad(async () => {
    // 初始化时重置分页，并设置加载状态为 'loadmore'
    state.page = 1;
    state.list = [];
    state.loading = 'loadmore';
    uni.showLoading({
        title: '加载中',
        mask: true
    });
    // 加载第一页数据
    getAccountHistory();
});

// 新增：手动加载更多的方法
const loadMore = () => {
    if (state.loading === 'loadmore') {
        state.page++;
        getAccountHistory();
    }
};

// 监听页面滚动到底部事件，实现分页加载
onReachBottom(() => {
    // 只有在加载状态为 'loadmore' 时才加载下一页
    if (state.loading === 'loadmore') {
        state.page++;
        getAccountHistory();
    }
});

// 获取账户历史记录
async function getAccountHistory() {
    // 在发起请求前，将加载状态设为 loading
    state.loading = 'loading';

    await commonAPI.accountHistory({
        page: state.page,
        pagesize: state.pageSize,
    }).then(res => {
        uni.hideLoading();
        if (res.code === REQUEST_SUCCESS && res.data) {
            const {
                data,
                pagination
            } = res.data;

            // 将新数据追加到列表中
            state.list = [...state.list, ...data];

            // 关键优化：根据返回的总页数和当前页数来判断是否还有更多数据
            if (pagination.pages > pagination.page) {
                // 还有更多数据，下次可以加载
                state.loading = 'loadmore';
            } else {
                // 已经加载完全部数据
                state.loading = 'nomore';
            }
        } else {
            state.loading = 'nomore';
            uni.showToast({
                title: res.message || '加载失败',
                icon: 'none'
            });
        }
    }).catch(err => {
        uni.hideLoading();
        state.loading = 'nomore';
        uni.showToast({
            title: '加载失败',
            icon: 'none'
        });
        console.error('加载账户历史失败', err);
    });
}
</script>

<style lang="scss" scoped>

</style>

<style lang="scss" scoped>
	
</style>
